import '@umijs/max';
import React, {useEffect, useState} from 'react';
import {Button, Card, Flex, Tooltip, Avatar, message} from "antd";
import "@/pages/Index/components/ScrollList/scrollList.less"
import {getInterfaceInfoRandUsingGet} from "@/services/api-backend/interfaceInfoController";
import {Link} from "@umijs/max";
import {history} from '@@/exports';
import {RightCircleFilled, PartitionOutlined, ShopOutlined} from "@ant-design/icons";
import {listUsingGet} from "@/services/api-backend/recommendController";
import SeamlessScroll from "@/components/SeamlessScroll";

export type Props = {
  onCancel: () => void;
  onSubmit: (values: API.InterfaceInfo) => Promise<void>;
  visible: boolean;
};

const ScrollList: React.FC<Props> = (props) => {
  const {visible, onCancel} = props;
  const [list, setList] = useState<API.InterfaceInfoRandVO[]>([])
  const [scrollLoading, setScrollLoading] = useState<boolean>(false)
  const pageSize = 12
  const loadList = async () => {
    setScrollLoading(true)
    const res = await listUsingGet({
      topK: pageSize
    })
    try {
      if (res.code === 0) {
        if(res.data.length<30){
          const tmps=[...res.data,...res.data]
          setList(tmps)
        }else{
          setList(res.data || [])
        }

      }
    } catch (e) {
      message.error("查询失败，" + e.message)
    } finally {
      setTimeout(() => {
        setScrollLoading(false)
      }, 700)
    }
  }
  useEffect(() => {
    loadList()
  }, []);


  return (
    <div className={"banner-container"}>
      <Card loading={scrollLoading}>
        <div>
          <Flex gap={""} align={"center"} justify={"space-between"} horizontal>
            <div className="banners-title">
              <div className="banners-title-small">免费API - 本平台持续服务，求各界人士不刷不D，谢谢！</div>
              <div className="banners-title-big">千位开发者入驻，上千款免费接口等你调用</div>
            </div>
            <div className="banner-button-group">
              <Button icon={<RightCircleFilled/>}>QQ群</Button>
              <Button icon={<PartitionOutlined/>} color="default" variant="solid">监控大屏</Button>
              <Button icon={<RightCircleFilled/>} color="default" variant="solid">对接统计</Button>
              <Button icon={<ShopOutlined/>} color="default" variant="solid">需求市场</Button>
            </div>
          </Flex>

          <div className="card-container">

            <div className={"tags-group-wrapper"}>
              <SeamlessScroll
                data={list}
                direction="horizontal"
                speed={30}
                itemWidth={120}
                hoverPause={false}
                renderItem={(item) => {
                  const toInterfaceRoute = `/one/interface_info/${item.id}`
                  return <>
                    <div className="tags-icon-item" key={item.id}>
                      <span className={"dot"}>.</span>
                      <Link to={{
                        pathname: toInterfaceRoute
                      }} title={item.name}>
                        <Avatar
                          size={100}
                          src={"https://img.88icon.com/download/jpg/20200917/b356eecbd7466587f2e405572bab885c_512_512.jpg!bg"}
                        />
                      </Link>
                      <Button  onClick={() => history.push(toInterfaceRoute)}
                               color="primary"
                               variant="filled">{item.name}</Button>
                    </div>
                  </>
                }}/>
            </div>

          </div>

        </div>
      </Card>
    </div>

  );
};
export default ScrollList;
